const { Col, Row, message, Spin } = antd;
const imgUrl = 'http://api.moodwo.com/public/index.php/picture/index?id=';

let pageInfo = {
    page_id: 9,
    page_data: []
};

const Admin_main = React.createClass({
    getInitialState() {
        return {
            edit_block_data : false,
            loading: false
        };
    },
    showBlockSetor(block_data=false){
        if(this.state.edit_block_data){
            this.setState({edit_block_data: false});
            setTimeout(()=>this.setState({edit_block_data: block_data}),100);
            $('html, body').animate({
                scrollTop: 0
            }, 200);
        }else{
            this.setState({edit_block_data: block_data});
        }
    },
    componentDidMount(){
        this.getPageInfo();
    },
    getPageInfo(){
        let url = getBaseUrl() + '/Admin/ShopBanners/getPage';
        let data = {
            name: "特卖专场",
            notes: "PC首页特卖专场布局"
        };
        this.setState({loading: true});
        _post(url,jQuery.param(data),{
            data_back: function(data){
                if(data.status){
                    if(data.info.page_data.length!=0){
                        pageInfo = data.info;
                    }
                    this.setState({loading: false});
                }else{
                    message.error("获取数据失败");
                    this.setState({loading: false});
                }
            }.bind(this),
            error: function(){
                message.error("获取数据失败");
                this.setState({loading: false});
            }.bind(this)});
    },
    add_block(){
        pageInfo.page_data.push({
            block_id: pageInfo.page_data.length + 1,
            block_name: '特卖专场左图右文本',
            block_type: '',
            banners: [
                {
                    key:1, id:0 ,name: '',title: '特卖',desc:'hot',discount:'1.7', width: 660, height: 300,
                    group_main_time: {
                        start_time: 0,
                        end_time: 0
                    },
                    group_product_list: {
                        p_ids: [],
                        sku: {
                        }
                    }
                }
            ]
        });
        this.setState({pageInfo});
    },
    delete_block(index){
        let block_id = pageInfo.page_data[index].block_id;

        //保存
        let url = getBaseUrl() + '/Admin/ShopBanners/deleteBlock';
        let data = {
            page_id: pageInfo.page_id,
            block_id: block_id
        };

        _post(url,jQuery.param(data),{
            data_back: function(data){
                if(data.status){
                    message.success("删除成功");
                    //让设计器重新加载数据
                    this.getPageInfo();
                    this.setState({loading: false});
                }else{
                    message.error("删除失败");
                    this.setState({loading: false});
                }
            }.bind(this),
            error: function(){
                message.error("删除失败");
                this.setState({loading: false});
            }.bind(this)});
    },
    render(){
        const pageData = pageInfo.page_data;

        const block_list = pageData.map(function(val,index){
            return(
                <li className="box">
                    <a className="delete" href="javascript:void(0);" onClick={()=>this.delete_block(index)}>删除</a>
                    <a className="link" href="javascript:void(0);" target="_blank" onClick={()=>this.showBlockSetor(val)} />
                    <div className="box-img">
                        {pageData[index].banners[0].id==0 ? null :
                            <img src={imgUrl+val.banners[0].id} />
                        }
                    </div>
                    <div className="box-info">
                        <div className="title">{pageData[index].banners[0].title}</div>
                        <div className="detail">{pageData[index].banners[0].desc}</div>
                        <div className="zhekou"><em>{pageData[index].banners[0].discount}</em>折起</div>
                    </div>
                </li>
            );
        }.bind(this));
        return(
            <Col span="24">
                <Row>
                    <Col>
                        <div className="right-main">
                                <h3>特卖专场banners</h3>
                                <Spin spinning={this.state.loading}>
                                    <div className="zc-l zhuanchang">
                                        <ul>
                                            {block_list}
                                            <li className="box" onClick={this.add_block}>
                                                <div className="add-block">
                                                    <div className="button">
                                                        <Icon type="plus" />
                                                        <div className="tip-text">添加block</div>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </Spin>

                            {!this.state.edit_block_data ? null : <Block_setor block={this.state.edit_block_data}
                                                                               hide={()=>this.showBlockSetor()}
                                                                               saveBack={this.getPageInfo} />}
                        </div>
                    </Col>
                </Row>
            </Col>
        );
    }
});